<!--
 * @FileDescription 工单
 * @Author lz
 * @Date 20230526 15:05:37
 * @LastEditors lz
 * @LastEditTime 20230526 15:05:37
-->
<template>
    <div class="Dia_wp">
        <div class="Popup">
            <div class="titBox">
                评分表
                <close-outlined class="cancel" @click="handleOk" />
            </div>
            <div class="package_box">
                <div class="contentBox">
                    <div class="title_box">
                        现场评分表
                        <img src="/images/ic_up_small.png" class="retract_img" @click="retract" v-if="state.retract">
                        <img src="/images/ic_down_small.png" class="retract_img" @click="retract" v-else>
                    </div>
                    <div class="BasicInformation" v-show="state.retract">
                        <div class="Basi_unit BOR BN">
                            <span class="unit_tit">选手参赛号</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit BOR">
                            <span class="unit_tit">裁判签字</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit BOR">
                            <span class="unit_tit">裁判长审判</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit  BOR BN">
                            <span class="unit_tit">统分裁判签字</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit BOR">
                            <span class="unit_tit">裁判签字</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit BOR">
                            <span class="unit_tit">监督仲裁签字</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit BOR BN">
                            <span class="unit_tit">车辆信息登记</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit BOR">
                            <span class="unit_tit">比赛时长</span>
                            <input type="text" class="unit_inp">
                        </div>
                        <div class="Basi_unit BOR">
                            <span class="unit_tit">实际用时</span>
                            <input type="text" class="unit_inp">
                        </div>
                    </div>
                    <div class="Form_box">
                        <div class="tit_box">
                            <div class="form_tit BOR T1 BN">序号</div>
                            <div class="form_tit BOR T2">项目</div>
                            <div class="form_tit BOR T3">评分点</div>
                            <div class="form_tit BOR T4">说明</div>
                            <div class="form_tit BOR T5">配分</div>
                            <div class="form_tit BOR T6">得分</div>
                        </div>
                        <div class="form_content">
                            <div class="big_box" v-for="(item, index) in HomeContent.Default.WorksheetData.value"
                                :key="index">
                                <div class="small_box1 BOR BN">
                                    <span class="parameter">
                                        {{ item.Serial }}
                                    </span>
                                </div>
                                <div class="small_box1_2 BOR">
                                    <span class="parameter">
                                        {{ item.Project }}
                                    </span>
                                </div>
                                <div class="small_box2">
                                    <div class="small_box3" v-for="(items, indexs) in item.Points" :key="indexs">
                                        <div class="RatingPoints BOR">
                                            <span class="parameter">
                                                {{ items.Name }}
                                            </span>
                                        </div>
                                        <div class="small_box4 BOR">
                                            <div class="small_box5" v-for="(itemes, indexes) in items.Items" :key="indexes">
                                                {{ itemes.Name }}
                                            </div>
                                        </div>
                                        <div class="partition BOR">
                                            <span class="parameter verticalCenter">配分
                                                <!-- {{ items.Score }} -->
                                                {{ items.Share }}
                                            </span>
                                        </div>
                                        <div class="Evascore BOR">
                                            <span class="parameter verticalCenter">得分
                                                <!-- {{ items.Share }} -->
                                                {{ items.Score }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { CloseOutlined } from '@ant-design/icons-vue';
import { ClientMessage } from '@runtime/generate/message/ClientMessage';
import WebSocketComponent from '@runtime/module/WebSocket/WebSocketComponent';
import { reactive, ref, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onUnmounted, StyleValue } from 'vue'
import HomeContent from '../HomeContent'
import MessageCode from '../MessageCode';
const sea_inp = ref<string>('');

const state = reactive({
    retract: true,
    current: 2,
    visible: false,
    ListTypes: 0,
    values: <any>[],
});

const handleOk = async () => {
    HomeContent.Default.EvaluateShow.value = false
};
//收起
function retract() {
    state.retract = !state.retract
}

onMounted(async () => {
    let newArr: any = await WebSocketComponent.Default.PostMessageAsync(new ClientMessage.DiagnosisAdapterRequest(MessageCode.Default.MsgCodesList.DIAGNOSTIC_RATINGFORM_GET))
    console.log("这是什么数据。。。。。", JSON.parse(newArr.Content).Result);
    HomeContent.Default.WorksheetData.value = JSON.parse(newArr.Content).Result.RatingFormGroupModels
    console.log('HomeContent.Default.WorksheetData.value222222: ',HomeContent.Default.WorksheetData.value);   
})
</script>

<style scoped>
.Dia_wp {
    width: 100%;
    height: 100%;
    background-color: rgb(0, 0, 0, 0.1);
    position: relative;
}

.Popup {
    width: 1440px;
    height: 880px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -55%);
    background: #FFFFFF;
    border-radius: 16px 16px 16px 16px;
}

.titBox {
    height: 54px;
    font-size: 36px;
    font-weight: 600;
    color: #000000;
    line-height: 42px;
    margin-top: 30px;
    margin-left: 40px;
}

.cancel {
    font-size: 28px;
    font-weight: 600;
    float: right;
    margin-top: 4px;
    margin-right: 30px;
}

.contentBox {
    border: 1px solid #E8ECF4;
    width: 100%;
    border-radius: 10px 10px 0 0;
}

.form_content_unit {
    width: 100%;
    min-height: 64px;
    position: relative;
}

.title_box {
    height: 62px;
    line-height: 62px;
    font-size: 20px;
    font-weight: 600;
    padding-left: 10px;
    color: #000;
}

.retract_img {
    float: right;
    width: 24px;
    margin-top: 16px;
    margin-right: 16px;
}

.BasicInformation {
    width: 100%;
    height: 168px;
}

.Basi_unit {
    float: left;
    width: 33.333%;
    height: 56px;

}

.BOR {
    border-top: 1px solid #E8ECF4;
    border-left: 1px solid #E8ECF4;
}

.BOL {
    border-left: 1px solid #E8ECF4;
}

.BOB {
    border-bottom: 1px solid #E8ECF4;
}

.BN {
    border-left: none;
}

.unit_tit {
    font-size: 16px;
    font-weight: 500;
    color: #1A1A1A;
    line-height: 56px;
    padding-left: 16px;
    font-weight: 600;
}

.unit_inp {
    width: 300px;
    height: 56px;
    outline: none;
    font-size: 16px;
    border: none;
    float: right;
    margin-right: 16px;
}

.package_box {
    overflow-y: auto;
    height: 760px;
    padding-right: 20px;
    margin: 0 40px;
    margin-top: 20px;
    color: #000;
}

.package_box::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}

.package_box::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/

    border-radius: 10px;
    background: #DFE1E8;
}

.package_box::-webkit-scrollbar-track {
    /*滚动条里面轨道*/

    border-radius: 10px;
    background: #F8F8F8;
}

.Form_box {
    width: 100%;
}

.tit_box {
    width: 100%;
    height: 42px;
    background-color: #F7F8FB;
}

.form_tit {
    float: left;
    text-align: center;
    line-height: 42px;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.form_content {
    font-size: 16px;
}

.T1 {
    width: 6%;
}

.T2 {
    width: 20%;
}

.T3 {
    width: 18%;
}

.T3s {
    width: 71%;
}

.T3ss {
    width: 10%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

.T4 {
    width: 40%;
}

.T5 {
    width: 8%;
}

.T6 {
    width: 8%;
}

.partition {
    width: 10.6%;
    position: absolute;
    top: 0;
    right: 11%;
    bottom: 0;
}

.RatingPoints {
    width: 24.4%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}


.parameter {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translate(0%, -50%);
}

.unit_list_box {
    position: absolute;
    left: 0;
    margin-left: 44%;
}

.form_content_unit_list {
    width: 100%;
    float: left;
    height: 40px;
    line-height: 16px;
    padding-left: 16px;
    padding-top: 20px;
}

.form_content_unit_list:nth-child(1) {
    border-top: 1px solid #E8ECF4;
}

.fcut1 {
    height: 1464px;
}

.fcut2 {
    height: 400px;
}

.verticalCenter {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.big_box {
    width: 100%;
    min-height: 64px;
    position: relative;
    overflow: hidden;
}

.small_box1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 6%;
}

.small_box1_2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 20%;
    margin-left: 6%;
}

.small_box2 {
    float: left;
    margin-left: 26%;
    width: 74%;
}

.small_box3 {
    position: relative;
    width: 100%;
    float: left;
    line-height: 24px;
}

.small_box4 {
    width: 54.2%;
    float: left;
    margin-left: 24.3%;
}

.small_box5 {
    width: 100%;
    float: left;
    line-height: 24px;
    padding: 12px;
}

.Evascore {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 10.9%;
}

.table {
    height: 50px;
    width: 75px;
    background-color: skyblue;
    text-align: center;
    line-height: 50px;
    color: #FFFFFF;
    font-size: 18px;
}
</style>